/*
 * @Author: weidewei
 * @Date: 2025-11-19 15:39:51
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-21 16:16:50
 * @Description:
 * @FilePath: \2025-front-face\vite-react-ts-template\src\pages\useContext.tsx
 */
import styled from 'styled-components';

const initData = [
  {
    id: 1,
    name: '苹果',
    price: 1,
    count: 1,
    isEdit: false,
  },
  {
    id: 2,
    name: '香蕉',
    price: 2,
    count: 1,
    isEdit: false,
  },
  {
    id: 3,
    name: '草莓',
    price: 3,
    count: 1,
    isEdit: false,
  },
];

type stateType = typeof initData;
const reducerFn = (state: stateType, action: { type: string; id: number; newName?: string }) => {
  const itemObj = state.find((v) => v.id === action.id)!;
  switch (action.type) {
    case 'add':
        itemObj.count++; // state的里面的对象也会改变，因为是同一个引用
      return [...state];
    case 'sub':
      if (itemObj.count === 0) return [...state];
      itemObj.count--;
      return [...state];
    case 'del':
      return state.filter((v) => v.id !== action.id);
    case 'edit':
        itemObj.isEdit = !itemObj.isEdit;
      return [...state];
    case 'editName':
        itemObj.name = action.newName!; //断言一下，表示一定有值
      return [...state];
    case 'blur':
        itemObj.isEdit = false;
        return [...state];  
    default:
        return state;
  }
};
export default function shopCarComp() {
  const [data, dispatch] = useReducer(reducerFn, initData);
  return (
    <Wrapper>
      <div className="shop-car">
        <table cellSpacing={0} cellPadding={0} border={1}>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>单价</th>
              <th>数量</th>
              <th>总价</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {data.map((item) => {
              return (
                <tr key={item.id}>
                  <td align="center">
                    {item.isEdit ? (
                      <input
                        type="text"
                        value={item.name}
                        onChange={(e) =>
                          dispatch({
                            type: 'editName',
                            id: item.id,
                            newName: e.target.value,
                          })
                        }
                        onBlur={()=>dispatch({type: 'blur',id: item.id})}
                      />
                    ) : (
                      item.name
                    )}
                  </td>
                  <td align="center">{item.price}</td>
                  <td align="center">
                    <button onClick={() => dispatch({ type: 'add', id: item.id })}>+</button>
                    {item.count}
                    <button onClick={() => dispatch({ type: 'sub', id: item.id })}>-</button>
                  </td>
                  <td align="center">{item.price * item.count}</td>
                  <td width={120} align="center">
                    <button onClick={() => dispatch({ type: 'edit', id: item.id })}>编辑</button>
                    <button onClick={() => dispatch({ type: 'del', id: item.id })}>删除</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={4}>总价</td>
              <td align="center">
                结算:{' '}
                {data.reduce((prev, cur) => {
                  return prev + cur.price * cur.count;
                }, 0)}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .shop-car {
    margin: 10px;
    color: #000;
  }
  .shop-car table {
    width: 100%;
  }
`;
